<template>
	<view class="title-box">
		<image :src="$myRequire(food.iconPath)" class="foodIcon"></image>
		
		<view class="title-1">
			<view class="title-col">
				<view class="title-name">{{ food.name + '营业中营业中营业中营业中营业中营业中' }}</view>
				<image :src="loveIcon" class="loveIcon"></image>
			</view>
			
			<u-rate v-model="food.stars" :disabled="true" inactive-color="#d7deeb" size="29"></u-rate>
			
			<view class="title-col">
				<text>{{ food.addr }}</text>
				<text :class="status_style">{{ status_flag }}</text>
			</view>
			
			<view class="title-stars">
				<u-tag v-for="item in food.tag"
					:key="item.id"
					:text="item.tag"
					type="info"
					size="mini" 
					class="tag"
					shape="circle">
				</u-tag>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'shop-title',
		props: ['food', 'isLove'],
		computed: {
			status_flag() {
				return this.food.open ? "营业中" : "暂停营业";
			},
			status_style() {
				return this.food.open ? "status_1" : "status_2";
			},
			loveIcon() {
				if (this.isLove) {
					return this.$myRequire('/other/love-active.png')
				} else {
					return this.$myRequire('/other/love.png')
				}
			}
		}
	}
</script>

<style>
	.title-box{
		display: flex;
		padding: 50rpx;
		background-color: #FFFFFF;
		border-radius: 0 0 7px 7px;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
					rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
	}
	
	.foodIcon{
		width: 200rpx;
		height: 200rpx;
		vertical-align: top;
		margin-right: 50rpx;
	}
	
	.title-1{
		width: calc(100% - 250rpx);
		display: flex;
		flex-direction: column;
	}
	
	.title-col{
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
	}
	
	.loveIcon{
		width: 50rpx;
		height: 50rpx;
	}
	
	.title-name{
		width: 350rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 20px;
		font-weight: 700;
	}
	
	/* 状态为：暂停营业的样式 */
	.status_1{
		color: #00b386;
	}
	
	/* 状态为：营业中的样式 */
	.status_2{
		color: #696969;
	}
	
	.title-stars{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 25rpx;
		padding-top: 25rpx;
		border-top: 1px solid #E6E6FA;
	}
</style>
